<template>
  <div class="tb-page ova"
       :class="'' + showHeader">
    <van-tabs v-model="active"
              swipeable
              @change="actChange">
      <van-tab v-for="(item,index) in tabsList"
               :key="index"
               :title="item.name">
        <van-list v-if="courseList.length"
                  v-model="loading"
                  :finished="noMore"
                  :offset="100"
                  finished-text="没有更多了"
                  @load="getCourseList">
          <div class="tb-list">
            <div v-for="(item,index) in courseList"
                 :key="index"
                 class="item">
              <CourseCard type='video'
                          :item="item"
                          @click-callback="itemClick"
                          @btn-callback="btnCallback"></CourseCard>
            </div>
          </div>
        </van-list>
        <div v-else
             class="no-data">
          <img src="/static/images/no-data.png"
               alt=""
               class="no-data-img">
          <div>
            <span class="no-data-tip">暂无课程，去<span class="no-data-home" @click="$router.push('/')">首页</span>看看吧~</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="tb-nav">
      <div class="tip">当前版本</div>
      <div class="menu"
           @click="showList = !showList;">
        <div v-if="nianji_id||press_id"
             class="data">
          <div class="name">
            <span>{{nianji_name}}</span>
            <span>{{press_name}}</span>
          </div>
          <img class="img"
               :src="(showList?'/static/images/up_arrow.png':'/static/images/down_arrow.png')"
               alt=""
               srcset="">
        </div>
        <div v-else
             class="nodata">
          <span>请选择</span>
        </div>
      </div>
    </div>
    <div v-show="showList"
         class="bg"
         @mousewheel.prevent
         @touchmove.prevent
         @click="showList=!showList">
      <div class="c-list"
           @touchmove.stop>
        <div class="list"
             @touchmove.stop>
          <div v-for="(item,index) in nianjiList"
               @click.stop="njClick(item)"
               :key="index"
               class="item"
               :class="+nianji_id===item.value?'act':''">
            {{item.label}}
          </div>
        </div>
        <div class="list">
          <div v-for="(item,index) in pressList"
               @click.stop="preClick(item)"
               :key="index"
               class="item"
               :class="press_name===item.short_name?'act':''">
            {{item.short_name}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex';

export default {
  name: 'TbCourseList',
  props: {
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      active: 0, //活动页
      tabsList: [
        //tabs栏
        { name: '语文', id: 27 },
        { name: '数学', id: 28 },
        { name: '英语', id: 29 },
        { name: '科学', id: 37 }
      ],
      xueke_id: 27, //学科id
      //   xueke_name: '语文', //学科名
      nianji_id: '', //年级id
      nianji_name: '', //年级名
      nianjiList: [
        //年级列表
        { value: 8, label: '一年级' },
        { value: 9, label: '二年级' },
        { value: 10, label: '三年级' },
        { value: 11, label: '四年级' },
        { value: 12, label: '五年级' },
        { value: 13, label: '六年级' }
      ],
      xueduan_id: 2, //学段id
      press_id: '', //出版社id
      press_name: '', //出版社名称
      pressList: [], //出版社列表
      showList: false,
      courseList: [], //课程列表
      curr: 1,
      limits: 10,
      user_id: '',
      module_id: 98,
      total: 10,
      loading: false,
      noMore: false

      //   stop: true
    };
  },
  created() {
    this.active = this.$route.query.actId || 0;
    this.xueke_id = this.tabsList[this.active].id;

    if (this.userInfo) this.user_id = this.userInfo.uid;
    this.getSelect();
  },
  computed: {
    ...mapGetters(['courseObj', 'userInfo', 'productInfo'])
  },
  methods: {
    ...mapMutations(['setCourseObj']),
    getSelect() {
      this.nianji_id = '';
      this.nianji_name = '';
      this.press_id = '';
      this.press_name = '';
      if (+this.active === 0) {
        this.nianji_id = this.courseObj.ch.nianji_id || '';
        this.press_id = this.courseObj.ch.press_id || '';
      } else if (+this.active === 1) {
        this.nianji_id = this.courseObj.ma.nianji_id || '';
        this.press_id = this.courseObj.ma.press_id || '';
      } else if (+this.active === 2) {
        this.nianji_id = this.courseObj.en.nianji_id || '';
        this.press_id = this.courseObj.en.press_id || '';
      } else if (+this.active === 3) {
        this.nianji_id = this.courseObj.si.nianji_id || '';
        this.press_id = this.courseObj.si.press_id || '';
      }
      this.nianjiList.map(e => {
        if (+this.nianji_id === e.value) {
          this.nianji_name = e.label;
        }
      });
      this.getPress();
      this.getCourseList(true);
    },
    setNj(item) {
      Object.keys(this.courseObj).map((e, i) => {
        if (+this.active === i) {
          this.courseObj[e].nianji_id = item.value;
        }
      });
      this.setCourseObj(this.courseObj);
    },
    setPr(item) {
      Object.keys(this.courseObj).map((e, i) => {
        if (+this.active === i) {
          this.courseObj[e].press_id = item.id;
        }
      });
      this.setCourseObj(this.courseObj);
    },
    njClick(item) {
      this.nianji_id = item.value;
      this.nianji_name = item.label;
      this.setNj(item);
      this.getSelect();
    },
    preClick(item) {
      this.press_id = item.id;
      this.press_name = item.short_name;
      this.setPr(item);
      this.getSelect();
    },
    actChange(e, i) {
      this.xueke_id = this.tabsList[e].id;
      this.pressList = [];
      this.getSelect();
    },
    itemClick(item) {
      this.$router.push('/classdetail/' + item.id);
    },
    btnCallback(item, stop) {
      stop();
      item.is_collection = item.is_collection ? 0 : 1;
      if (this.user_id) {
        let url = 'api/user/save_course_collection';
        let params = {
          uid: this.user_id,
          course_id: item.id,
          product_id: this.productInfo.product_id,
          channel_id: this.productInfo.channel_id,
          terminal_id: this.productInfo.terminal_id
        };
        this.http.$post(url, params).then(res => {
          //   console.log(res);
        });
      } else {
        this.$util.login();
      }
    },
    getPress() {
      this.http
        .$post('api/resource.tag/get_tag', {
          nianji_id: this.nianji_id,
          xueke_id: this.xueke_id,
          xueduan_id: this.xueduan_id
        })
        .then(res => {
          let temp = res.subjects.filter(e => e.id == this.xueke_id);
          if (temp.length) {
            this.pressList = temp[0].press;
            this.pressList.map(j => {
              if (+this.press_id === j.id) {
                this.press_name = j.short_name;
              }
            });
          } else {
            this.pressList = [];
          }
        });
    },
    getCourseList(init) {
      //   this.stop = true;
      let toast;
      if (init) {
        this.courseList = [];
        this.noMore = false;
        this.curr = 1;
        this.total = 10;
        toast = this.$toast.loading({
          mask: true,
          message: '加载中...'
        });
      }
      this.total = this.curr * this.limits;
      let url = 'api/resource.course/get_course_list';
      let params = {
        curr: this.curr,
        limits: this.limits,
        is_https: 1,
        xueduan_id: 2,
        module_id: this.module_id,
        xueke_id: this.xueke_id,
        press_id: this.press_id,
        nianji_id: this.nianji_id,
        user_id: this.user_id
        // new_subject_id: 119
      };
      this.loading = true;
      this.http
        .$post(url, params)
        .then(res => {
          this.loading = false;
          this.curr++;
          if (init) {
            toast.clear();
          }
          this.courseList.push(...res.list);
          if (this.total >= res.total) {
            this.noMore = true;
          }
          //   this.stop = false;
        })
        .catch(err => {
          //   console.log(err);
          if (+err.code === 404) {
            this.$toast.loading({
              type: 'html',
              message:
                '<div style="display: flex;flex-direction: column;align-items: center;padding:1.5rem .5rem;"><i class="van-icon van-icon-fail" style="font-size: 3rem;"></i><span style="font-size:.8rem;">课本还在录制中...</span></div>'
            });
          }
          this.loading = false;
          this.noMore = true;
        });
    }
  }
};
</script>
<style lang="less" scoped>
.tb-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  &.false {
    /deep/ .van-tabs__wrap {
      top: 0 !important;
      color: red;
    }
    .tb-nav {
      top: 2.75rem !important;
    }
    .bg {
      top: 4.75rem !important;
    }
  }
  /deep/ .van-tabs {
    position: relative;
    .van-tabs__wrap {
      position: fixed;
      top: 3.75rem;
      width: 100%;
    }
  }
  /deep/ .van-tabs__line {
    background-color: #00e2ff;
  }
  /deep/ .van-tabs__content {
    position: absolute;
    top: 4.75rem;
    left: 1rem;
    right: 1rem;
  }
  .load {
    width: 100%;
    height: 10rem;
    margin: 0 auto;
    /deep/ .van-loading {
      top: 45%;
      left: 45%;
    }
  }
  .no-data {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-img {
      width: 10rem;
    }
    &-tip {
      font-size: 1rem;
      color: #ccc;
    }
    &-home {
      color: #0fd2eb;
      margin: 0 0.2rem;
    }
  }
  .tb-list {
    .item {
      display: flex;
      margin-top: 1rem;
      height: 7rem;
    }
  }
  .tb-nav {
    position: fixed;
    width: 100%;
    top: 6.5rem;
    display: flex;
    align-items: center;
    height: 2rem;
    background-color: #f0f0f0;
    padding: 0 1rem;
    font-size: 0.8rem;
    box-sizing: border-box;
    .tip {
      width: 4rem;
      height: 1.2rem;
      line-height: 1.2rem;
      background-color: #fdc230;
      border-radius: 1rem 1rem 1rem 0rem;
      text-align: center;
      color: #fff;
      margin-right: 1rem;
    }
    .menu {
      flex: 1;
      overflow: scroll;
      //   width: 16rem;
      height: 2rem;
      line-height: 2rem;
      .data {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          font-size: 0.8rem;
        }
        .img {
          width: 0.8rem;
          height: 0.5rem;
        }
      }
    }
  }
  .bg {
    position: absolute;
    width: 100vw;
    top: 8.5rem;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.68);
    .c-list {
      background-color: #fff;
      display: flex;
      height: 18rem;
      width: 100%;
      .list {
        &:nth-child(1) {
          border-right: 1px solid #ccc;
        }
        width: 12rem;
        text-align: center;
        overflow: scroll;
        .item {
          height: 3rem;
          line-height: 3rem;
          color: #999999;
        }
        .act {
          color: #524e61;
          background-color: #f0f0f0;
        }
      }
    }
  }
}
</style>
